<template>
  <a-breadcrumb separator=">">
    <a-breadcrumb-item
      v-for="item in navs"
      :key="item.path"
      @click="handleBreadcrumbClick(item)"
      class="breadcrumb-item"
    >
      {{ item.meta.title }}
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const navs = computed(() => {
  const matched = route.matched;
  const result = [];

  // 遍历匹配的路由记录
  for (let i = 0; i < matched.length; i++) {
    const record = matched[i];
    // 跳过重复的首页
    if (i > 0 && record.path === '/home' && matched[i - 1].path === '/')
      continue;

    // 添加有效路由记录
    result.push({
      path: record.path,
      meta: record.meta,
      name: record.name,
    });
  }

  return result;
});

const handleBreadcrumbClick = (item: any) => {
  // 排除当前路由
  if (item.path === route.path) return;
  // 跳转到对应路径
  router.push(item.path);
};
</script>

<style lang="scss" scoped>
.ant-breadcrumb {
  .breadcrumb-item {
    font-size: 16px;
    &:hover {
      color: #1890ff;
      cursor: pointer;
      /* 关键样式：小手指针 */
    }

    &:last-child {
      color: rgba(0, 0, 0, 0.65);
      cursor: default;
      /* 当前页面包屑不显示小手 */
    }
  }
}
</style>
